<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>AJAX请求</h1>
  <input type="button" value="点击发送请求" onclick="fun()">
  <h1 id="con"></h1>
  <script type="text/javascript">
    function fun() {
      // 发送AJAX请求
      // 1.创建XMLHttpRequest对象
      var xhr = new XMLHttpRequest(); // 仅限于除了IE浏览器之外的主流浏览器
      // 2.准备发送请求 第一个参数:请求方式, 第二个参数:请求地址, 第三个参数:是不是异步
      xhr.open("GET", "/hello", true);
      // 3.检查XMLHttpRequest对象的状态
      xhr.onreadystatechange = function () {
        // readyState表示响应是否完成(4表示完成), status表示响应的状态(200表示正常状态)
        if (xhr.readyState == 4 && xhr.status == 200) {
          // 获取服务器响应的信息
          var data = xhr.responseText;
          var person = eval("(" + data + ")");
          document.getElementById("con").innerText = "id:" + person.id + "-- 姓名:" + person.name +
              "-- 年龄:" + person.age + "-- 性别:" + person.gender;
        }
      }
      // 4.发送AJAX请求
      xhr.send();
    }
  </script>
</body>
</html>